<!--
 * @Descripttion: 
 * @version: 
 * @Author: guangyunl
 * @Date: 2024-01-11 02:57:31
 * @LastEditors: guangyunl
 * @LastEditTime: 2024-03-29 01:35:18
-->
<!-- 订单管理已完成 -->


<template>
    <div id="template">
        <page-main>
            <avue-crud
                ref="crud"
                v-model="Main_Form"
                :option="Main_Option"
                :data="Main_Data"
                :page.sync="Main_Page"
                :search.sync="Main_search"
                :table-loading="main_table_loading"
                @refresh-change="refreshChange"
                @search-change="searchChange"
                @reset-change="resetChange"              
                @row-update="rowUpdate"
                @row-del="rowDel"
                @size-change="sizeChange"
                @current-change="currentChange"
            >
                <template slot="menu" slot-scope="{ row, size }">
                    <el-button type="text" :size="size" @click="viewOrders(row)"
                        >查看订单</el-button
                    >
                </template>
            </avue-crud>
        </page-main>

        <el-drawer
            title="查看商品"
            :visible.sync="viewOrdersDrawer"
            :destroy-on-close="true"
            size="80%"
        >
            <div>
              <page-main>
                  <div class="title"><div class="title-icon"></div>订单信息</div>
                  <div class="title-info">
                    <div class="title-infoItem" v-for="(item,index) in orderInfo" :key="index">
                      {{ `${item.label}:${orderObject[item.value]}` }}
                    </div>
                  </div>
                </page-main>
                <page-main>
                  <div class="title"><div class="title-icon"></div>客户信息</div>
                  <div class="title-info">
                    <div class="title-infoItem" v-for="(item,index) in customerInfo" :key="index">
                      {{ `${item.label}:${customerObject[item.value]}` }}
                    </div>
                  </div>
                </page-main>
                <page-main>
                  <div class="title"><div class="title-icon"></div>收货地址</div>
                  <div class="title-info">
                    <div class="title-infoItem" v-for="(item,index) in addressInfo" :key="index">
                      {{ `${item.label}:${addressObject[item.value]}` }}
                    </div>
                  </div>
                </page-main>
                <page-main>
                  <div class="title"><div class="title-icon"></div>商品列表</div>
                  <div class="title-shop">
                    <div class="title-shopItem" v-for="(item,index) in shopList" :key="index">
                      <div>
                        <el-image
                          style="width: 100px; height: 100px;"
                          :src="item.defaultImg">
                        </el-image>
                      </div>
                      <div class="title-shopHeader">
                        <div class="title-shopItem-name">{{ item.title }}</div>
                        <div class="title-shopItem-price">¥{{ item.price }}</div>
                      </div>
                      <div class="title-shopItem-quantity">X{{ item.orders_products.pcount &&item.orders_products.pcount ? item.orders_products.pcount : 0 }}</div>
                    </div>
                  </div>
                </page-main>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { Main_Option, Main_Data, customerInfo, addressInfo, shopListInfo, orderDirt, orderInfo } from "./config";

import { 
    queryOrdersApi,
    updateOrdersApi,
    deleteOrdersApi,
} from "@/api/ordersManage/index";

export default {
    data() {
        return {
            Main_Option,
            Main_Data,
            main_table_loading: false,
            Main_Form: {},
            Main_search: {},
            Main_Page: {
                currentPage: 1,
                pageSize: 10,
                total: 1,
            },
            viewOrdersDrawer: false,
            customerInfo,
            customerObject: {},
            addressInfo,
            addressObject: {},
            shopList: [],
            orderDirt, 
            orderInfo,
            orderObject: {},
        };
    },
    mounted() {
        this.getHomePageInfoFunc();
    },
    methods: {
        // 搜索事件
        async searchChange(params, done) {
            this.Main_Page.currentPage = 1;
            this.Main_Page.pageSize = 10;
            await this.getHomePageInfoFunc();
            done();
        },
        currentChange(val) {
            this.Main_Page.currentPage = val;
            this.getHomePageInfoFunc();
        },

        sizeChange(val) {
            this.Main_Page.pageSize = val;
            this.getHomePageInfoFunc();
        },
        // 重置
        resetChange() {
            this.Main_search = {};
        },
        // 刷新
        refreshChange() {
            this.Main_Page.currentPage = 1;
            this.getHomePageInfoFunc();
        },

        rowUpdate(row, index, done, loading) {
            const { id, status, totals } = row;
            this.updateInterfaceFunc({ id, status, totals }, done, loading);
        },

        rowDel(row) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteInterfaceFunc({ id: row?.id ?? "" });
                })
                .catch(() => {
                    this.$message.info("已取消");
                });
        },
        // 查看商品操作
        viewOrders(row) {
            this.viewOrdersDrawer = true;
            let _address = row?.address ?? {};
            _address["receiveAddress"] = `${_address?.provincial??'-'}${_address?.city??'-'}${_address?.address??'-'}`
            this.$set(this, 'customerObject', row?.user ?? {});
            const statusDecs = orderDirt?.find(item => item.value === row?.status)?.label ?? '';
            this.$set(this, 'orderObject', {statusDecs, totals: row?.totals??0, remark: row?.remark??'', coupon_totals: row?.coupon_totals??''});
            this.$set(this, 'addressObject', _address);
            this.$set(this, 'shopList', row?.products??[]);
            console.log(row?.products,"<=======shopList");
            // this.customerObject = row?.user ?? {};
        },


        // 获取主页
        async getHomePageInfoFunc() {
            this.main_table_loading = true;
            const response = await queryOrdersApi({
                ...this.Main_search,
                currentPage: this?.Main_Page?.currentPage ?? 1,
                pageSize: this?.Main_Page?.pageSize ?? 10,
            }).catch(() => {});

            // console.log("🚀🚀🚀🚀🚀");
            // console.log(response,"<==========ordersResponse");
            // console.log("🚀🚀🚀🚀🚀");
            
            if (response?.code === 200) {
                this.Main_Data = response?.data?.records ?? [];
                this.Main_Page.total = response?.data?.total ?? 0;
            } else {
                this.Main_Data = [];
                this.Main_Page.total = 0;
            }
            this.main_table_loading = false;
        },


        // 编辑
        async updateInterfaceFunc(data, done, loading) {
            const response = await updateOrdersApi(data).catch(() => {});
            if (response?.code === 200) {
                this.$notify.success({ title: "提示", message: "编辑成功" });
                this.getHomePageInfoFunc();
                done();
            }
            loading();
        },
        // 删除
        async deleteInterfaceFunc(data) {
            const loadding = this.$loading({
                lock: true,
                text: "加载中...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const response = await deleteOrdersApi(data).catch(() => {});
            if (response?.code === 200) {
                this.$notify.success({ title: "提示", message: "删除成功" });
                this.Main_Page.currentPage = 1;
                this.getHomePageInfoFunc();
            }
            loadding.close();
        },
    },
};
</script>

<style lang="scss">
.title {
    display: flex;
    align-items: center;
    font-weight: bold;
    &-icon {
        width: 8px;
        background-color: #5482ee;
        height: 13px;
        margin-right: 5px;
    }
    &-info {
        padding: 5px;
    }
    &-infoItem {
        display: inline-block;
        width: 33%;
    }
    &-shopHeader {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    &-shopItem {
        display: flex;
        padding: 10px;
        border: 1px dashed;
        position: relative;
        &-name {
            margin-left: 5px;
            font-weight: bold;
        }
        &-price {
            margin-left: 5px;
            font-weight: bold;
            color: #e60000;
        }
        &-quantity {
            position: absolute;
            right: 0;

            /* top: 0; */
            font-size: 69px;
            color: #5482ee;
            margin-right: 5px;
        }
    }
}

</style>
